<template>
  <div class="contest-announce" v-loading="loading">
<!--    发布公告弹出狂-->
    <el-dialog title="发布公告" :visible.sync="dialogFormVisible">
      <el-input v-model="form.contestId" v-show="false" autocomplete="off"></el-input>
      <el-form :model="form">
        <el-form-item label="标题" >
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容" >
          <el-input type="textarea" v-model="form.text" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAnnounce">确 定</el-button>
      </div>
    </el-dialog>


    <h2 style="text-align: left;">比赛公告
      <el-button v-if="isAdmin()" icon="el-icon-plus" style="float: right;margin-left: 10px;" type="success" size="mini" @click="dialogFormVisible = true;">发布公告</el-button>
      <el-button icon="el-icon-refresh" style="float: right;" type="success" size="mini" @click="reloadAnnounce()">刷新</el-button>
    </h2>
    <el-empty description="暂无公告" v-if="total==0">

    </el-empty>

    <div v-for="item in announcements" :key="item.id" class="announcement-list">
      <h3 >{{item.title}}
        <el-link v-if="isAdmin()" @click="deleteAnnouncement(item)" style="float: right;margin-right: 10px;" :underline="false" type="danger">删除</el-link>
        <div class="announcement-time">
          <span>日期：</span>
          <span>{{ item.createTime }}</span>
        </div>
      </h3>

      <div class="announcement-text">
        {{ item.text }}
      </div>

    </div>
    <div class="page" v-if="total!=0">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="params.size"
          :page-sizes="[10,20,30,50,100]"
          @current-change="chg"
          @size-change="chgsize" >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import * as contestApi from '@/api/contest'
import { isAdmin , loginUser ,isLogin} from '@/utils/auth';
import * as announcementApi from "@/api/announcement";

export default {
  name: "contestAnnouncement",
  props:["contest"],
  data() {
    return {
      contestDetail:{},
      params:{
        page:1,
        size:10,

      },
      loading:false,
      announcements:[],
      total:0,
      dialogFormVisible:false,//添加公告
      form:{},
    }
  },
  methods:{
    addAnnounce(){
      this.form.contestId = this.contestDetail.id;
      contestApi.saveAnnouncement(this.form).then(res=>{
        if(res.data.success){
          this.$message({"type": "success", "message": "发布成功"});
          this.dialogFormVisible = false;
          this.form = {};
        }
      })
    },
    deleteAnnouncement(data) { //删除
      this.$confirm(this.$t('problemMode.case.deleteWarnBefore') + data.title + this.$t('problemMode.case.deleteWarnAfter'), this.$t('prompt'), {
        confirmButtonText: this.$t('save'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        contestApi.deleteAnnouncement({"id": data.id}).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '删除成功!'});
            this.getContestAnnouncementList()
          }
        })
      })
    },
    //每页记录数发生改变时
    chgsize(pgsize) {
      //更改每页记录数
      this.params.size = pgsize;
      //从每一页开始查询
      this.params.page = 1;
      //重新查询
      this.getContestAnnouncementList();
    },
    //当页数发生变化时执行
    chg(curpage) {
      //更新查询的页数
      this.params.page = curpage;
      //重新查询
      this.getContestAnnouncementList();
    },
    //获取公告列表
    getContestAnnouncementList(){

      contestApi.getAnnouncementList(this.params).then(res=>{
        this.announcements = res.data.data.dataList;
        this.total = res.data.data.total;

      })
    },
    setLoading(){ //唉。。。设置为false；
      this.loading = false;
    },
    reloadAnnounce(){ // 刷新按钮
      this.loading = true;
      this.getContestAnnouncementList();
      setTimeout(this.setLoading,1000)

    },
    //判断是否为管理员
    isAdmin(){
      // console.info(isAdmin())
      return isAdmin();
    },
  },
  created() {
    if(this.contest){  //模块引用
      this.contestDetail = this.contest;
      this.params.contestId = this.contestDetail.id;
    }else{ //地址参数拼接
      Object.assign(this.params,this.$route.query)

    }
    this.getContestAnnouncementList();
  }
}
</script>

<style scoped>
.contest-announce{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background-color: white;
  padding: 5px;
}
.contest-announce .announcement-list{
  text-align: left;
  border: #67c23a 1px solid;
  border-radius: 4px;
  margin: 3px;
  padding: 5px;

}
.contest-announce .announcement-list .announcement-time{
  color: gray;
  font-size: 13px;
  font-weight: 400;
}
.contest-announce .announcement-list h3{
  margin-top: 5px;
}
.contest-announce .announcement-list .announcement-text{
  color:#058282;
  padding-left: 5px;
  font-style:italic;
  font-size: 18px;
  line-height:150%;
}

</style>